<template>
  <div>
    <div class="interApp">
      <!-- 面试评价 -->
      <div class="interview">
        <van-nav-bar class="title">
          <template #left>
            <span class="leftText">面试评价</span>
          </template>
          <template #right>
            <span class="rightText" @click="commentClick">写评论</span>
          </template>
        </van-nav-bar>
        <div class="score">
          <div class="left">
            <p>
              <span>{{ list.score | getAverage }}</span
              >分
            </p>
            <!-- 评分插件 -->
            <van-rate
              :value="list.score | getAverage"
              :size="15"
              color="#ffd21e"
            />
          </div>
          <div class="right">
            <p>
              岗位描述
              <van-rate
                :value="list.score.positionScore"
                :size="15"
                color="#ffd21e"
              />
            </p>
            <p>
              面试情况
              <van-rate
                :value="list.score.interviewScore"
                :size="15"
                color="#ffd21e"
              />
            </p>
            <p>
              面试官
              <van-rate
                :value="list.score.interviewerScore"
                :size="15"
                color="#ffd21e"
              />
            </p>
          </div>
        </div>
      </div>
      <!-- 评价信息 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getDetailComment"
      >
        <div class="evabox" v-for="(item, index) in commentData" :key="index">
          <div class="evaluate">
            <div class="head">
              <img
                style="width:100%;height:100%"
                :src="item.user.avatar | formatImg"
                alt=""
              />
            </div>
            <div class="info">
              <p class="name">{{ item.user.nickname }}</p>
              <p class="jobs">面试岗位：{{ item.position }}</p>
              <span v-for="(tag, index) in item.tags" :key="index">{{
                tag
              }}</span>
              <!-- <span>面试效率高</span> -->
            </div>
            <div class="star">
              <van-rate :value="item | getAverage" :size="15" color="#ffd21e" />
            </div>
          </div>
          <div class="infoBox">
            <div class="comInfo">{{ item.content }}</div>
            <div class="time">{{ item.created_at | formatData }}</div>
          </div>
        </div>
      </van-list>
    </div>
    <!-- 企业评论 -->
    <CompanyComment v-model="show"></CompanyComment>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { companiesIdComments } from '@/api/company.js'
import CompanyComment from './companyComment.vue'

export default {
  name: 'CompanyCom',
  components: { CompanyComment },
  data () {
    return {
      show: false,
      value: 3,
      list: [],
      form: {
        id: this.$route.params.id,
        start: 0,
        limit: 5
      },
      total: 0,
      commentData: [],
      loading: false,
      finished: false
    }
  },
  async created () {
    this.list = this.detailList

    // this.getDetailComment()
  },
  mounted () {
    this.$bus.$on('changeCommentData', val => {
      this.commentData.unshift(val)
    })
  },
  beforeDestroy () {
    this.$bus.$off('changeCommentData')
  },
  computed: {
    ...mapState('companyDetail', ['detailList']),
    average_score () {
      if (this.list && this.list.score) {
        const val =
          (this.list.score.positionScore +
            this.list.score.interviewScore +
            this.list.score.interviewerScore) /
          3
        return Number(val.toFixed(1))
      } else {
        return 0
      }
    }
  },
  methods: {
    // ...mapActions('companyDetail', ['getDetailList']),

    // 获取公司评论数据
    async getDetailComment () {
      const res = await companiesIdComments(this.form)
      this.loading = false
      this.commentData.push(...res.data.list)
      this.total = res.data.total
      if (this.total > this.commentData.length) {
        this.form.start += this.form.limit
      } else {
        this.finished = true
      }
    },
    // 写评论
    commentClick () {
      this.show = true
      // console.log('this.show: ', this.show)
    }
  },
  filters: {
    // 计算平均值
    getAverage (obj) {
      const val =
        (obj.positionScore + obj.interviewScore + obj.interviewerScore) / 3
      return Number(val.toFixed(1))
    }
  }
}
</script>

<style lang="less" scoped>
// 面试评价区域
.interApp {
  padding-bottom: 200px;
  // 面试评价
  .interview {
    ::v-deep .van-nav-bar__left {
      font-size: 36px;
      font-weight: 700;
    }
    ::v-deep .van-nav-bar__right {
      font-size: 28px;
      color: #181a39;
    }
    // 评分组件样式
    .score {
      width: 690px;
      height: 232px;
      background: #f7f7f7;
      border-radius: 16px;
      margin-left: 31px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      // 左侧盒子
      .left {
        margin-left: 20px;
        padding: 20px 38px;
        width: 260px;
        border-right: 1px solid #ccc;
        text-align: center;
        p {
          font-size: 30px;
          color: #545671;
          span {
            font-size: 64px;
            color: #00b8d4;
          }
        }
      }
      // 右侧盒子
      .right {
        flex: 1;
        padding: 0 38px;
        p {
          font-size: 28px;
          color: #545671;
          position: relative;
          margin: 15px 0;
          ::v-deep .van-rate {
            position: absolute;
            right: 0;
          }
        }
      }
    }
  }
  // 评价信息
  .evabox {
    .evaluate {
      display: flex;
      margin-top: 60px;
      position: relative;
      // 头像
      .head {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: #000;
        margin-left: 36px;
        margin-right: 17px;
        overflow: hidden;
      }
      // 评论选项
      .info {
        flex: 1;
        font-size: 24px;
        position: relative;
        .name {
          color: #545671;
          font-weight: 600;
          margin-bottom: 10px;
        }
        .jobs {
          color: #b4b4bd;
          margin-bottom: 30px;
        }
        span {
          background-color: #f7f4f5;
          text-align: center;
          padding: 1.5px 7px 1.5px 10px;
          color: #b4b4bd;
          margin-right: 15px;
        }
      }
      // 星星评分
      .star {
        width: 200px;
        position: absolute;
        right: 18px;
      }
    }
    .infoBox {
      margin-left: 123px;
      margin-right: 32px;
      .comInfo {
        font-size: 28px;
        color: #181a39;
        margin-top: 30px;
      }
      .time {
        font-size: 24px;
        color: #b4b4bd;
        margin-top: 25px;
      }
    }
  }
}
</style>
